<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>视频播放页</title>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/jquery-3.4.1.min1.js"></script>
    <script src="js/jquery.validate.js"></script>
    <script src="js/jquery.validate.regex.js"></script>
    <script src="js/vue.min1.js"></script>
    <link rel="stylesheet" href="css_w/videoSort.css">
    <link rel="stylesheet" href="css_w/public.css">
    <link rel="stylesheet" href="css_w/videoOpen.css">
    <link rel="stylesheet" href="css_w/test.css">
<!--    <link rel="stylesheet" href="css_w/test.css">-->
    <script>
        $(function () {

            var videoID2=sessionStorage.getItem("videoId1");
            // sessionStorage.removeItem("videoId1");

            var vm = new Vue({
                el:"#newyxk",
                data:{
                    details:[],
                },created: function () {
                    $.ajax({
                        url: "/getVideoDetail",
                        type: "post",
                        dataType: "json",
                        data:{
                            "videoId":videoID2,
                        },
                        success:function (data) {
                            for(var i=0;i<data.length;i++){
                                vm.details.push({upload_time:data[i].uploadTime.toString().substr(0,10),destination:data[i].destination,video_title:data[i].videoTitle,video_hot:data[i].videoHot, main_id:data[i].mainId,discuss_id:data[i].discussId,video_detail:data[i].videoDetail,video_url:data[i].videoUrl});
                            }
                        }
                    });
                },methods:{
                }
            });


        });


    </script>
</head>
<body>
<!--头部导航栏-->
<div class="public_head">
    <ul>
        <li class="logo"><a href="http://www.youxiake.com" target="_blank" style="background-image: url(images_W/logo_01.png);"></a></li>
        <li><a href="sy-index.html">首页</a></li>
        <li><a href="community_my.html">社区</a></li>
        <li><a>目的地</a></li>
        <li><a href="YouJi-Z.html">攻略</a></li>
        <li><a href="video.html" style="color: orange;">视频</a></li>
        <li><a target="_blank">领队</a></li>
        <li><a href="photo.html">摄影</a></li>
        <li class="mugua_box">
            <a class="mugua_a" href="javascript:;">旅游</a>
            <div class="mugua_ul">
                <a target="_blank" class="mugua_li">周边游</a>
                <a target="_blank" class="mugua_li">国内游</a>
                <a target="_blank" class="mugua_li">出境游</a>
                <a target="_blank" class="mugua_li">当地玩乐</a>
                <a target="_blank" class="mugua_li">亲子游</a>
                <a target="_blank" class="mugua_li">户外游</a>
                <a target="_blank" class="mugua_li">定制游</a>
            </div>
        </li>
        <li><a href="http://www.youxiake.com/app/" target="_blank">APP</a></li>
        <li style="float: right;"><a href="http://www.youxiake.com/reg?refer=http://www.youxiake.com/film/" target="_blank">注册</a></li>
        <li style="float: right;"><a href="http://www.youxiake.com/login?refer=http://www.youxiake.com/film/" target="_blank">登录</a></li>
    </ul>
</div>
<!--主体部分-->
<div id="newyxk" class="newfilm" module="newfilm" child="filmDetail" v-for="(detail,index) in details">
    <div class="screen_container">
        <div class="video_container content" style="text-align: center;">
            <video width="960" height="540" style="margin-top: 15px;background: #000;" controls :poster="detail.main_id">
                <source :src="detail.video_url" type="video/ogg">
                <source :src="detail.video_url" type="video/mp4">
            </video>
        </div>
    </div>

    <div class="detail_container" >
        <div class="container_left">
            <div class="left_video">
                <div class="video_titleBox">
                    <div class="video_original">原创</div>
                    <h1 class="video_title">{{detail.video_title}}</h1>
                    <div class="video_tag  video_lightTag ">旅行</div>
                    <div id="clip_button" class="video_copy">[复制链接]</div>
                    <div class="video_copy_clicked">复制成功！</div>
                </div>
                <!-- 视频标签 -->
                <div class="video_flag">
                    <a  target="_blank">
                        <div class="flag_item">{{detail.destination}}</div>
                    </a>
                </div>

                <div class="video_msgBox">
                    <div>{{detail.upload_time}}</div>
                    <div>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</div>
                    <div>播放&nbsp;&nbsp;{{detail.video_hot}}&nbsp;&nbsp;&nbsp;&nbsp;</div>
                    <div>评论&nbsp;&nbsp;{{detail.discuss_id}}</div>
                </div>
                <div class="video_like ">
<!--                    <div class="demo">-->
<!--                        <img src="images_W/3.png" style="bottom: 800px; opacity: 0; left: 138px;">-->
<!--                        <img src="images_W/2.png" style="bottom: 800px; opacity: 0; left: 138px;">-->
<!--                        <img src="images_W/3.png" style="bottom: 800px; opacity: 0; left: 138px;">-->
<!--                        <img src="images_W/2.png" style="bottom: 800px; opacity: 0; left: 138px;">-->
<!--                        <img src="images_W/3.png" style="bottom: 800px; opacity: 0; left: 138px;">-->
<!--                        <img src="images_W/3.png" style="bottom: 800px; opacity: 0; left: 138px;">-->
<!--                        <img src="images_W/1.png" style="bottom: 800px; opacity: 0; left: 138px;">-->
<!--                        <img src="images_W/3.png" style="bottom: 800px; opacity: 0; left: 138px;">-->
<!--                        <img src="images_W/2.png" style="bottom: 800px; opacity: 0; left: 138px;">-->
<!--                        <img src="images_W/1.png" style="bottom: 800px; opacity: 0; left: 138px;">-->
<!--                        <img src="images_W/1.png" style="bottom: 800px; opacity: 0; left: 138px;">-->
<!--                    </div>-->
                   <button onclick="clickCounter()" type="button" id="result" style="color: white;width: 38px;height: 20px;">{{detail.discuss_id}}</button>
                </div>


                <div class="video_share">
                    分享
                    <div class="video_shareBox">
                        <div class="bdsharebuttonbox bdshare-button-style0-16" data-bd-bind="1568084821058">
                            <a href="#" class="shareWeixin bds_weixin" data-cmd="weixin" title="分享到微信"></a>
                            <a href="#" class="shareKongjian bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
                            <a href="#" class="shareWeibo bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
                            <a href="#" class="shareQQ bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="left_description">
                <div class="description_content">
                    <p>
                        <span >{{detail.video_detail}}</span>
                        <br>
                    </p>
                </div>
                <div class="description_copyright">
                    ©本内容版权归神仙游所有，禁止转载或编译
                </div>
            </div>
            <div class="left_comment">
                <div class="comment_area">
                    <div class="area_header">
                        <span class="header_strong">评论</span>
                        共 <span class="header_light">51</span> 条评论
                    </div>
                    <div class="area_box">
                        <div style="background-image: url(images_W/60.jpg)" class="box_avatar"></div>
                        <div class="box_content">
                            <textarea placeholder="你怎么看？" maxlength="2000" id="emoji_box"></textarea>
                            <div class="box_emoji">
                                <a href="javascript:;" id="emoji"></a>
                            </div>
                        </div>
                    </div>
                    <div class="area_submit_box">
                        <div class="area_submit_length">还可以输入<span id="commentLeftLength">2000</span>个字</div>
                        <div id="submitComment" class="area_submit">发布评论</div>
                    </div>
                </div>
                <div id="commentContainer" class="user_commentContainer">
                    <div class="user_comment">
                        <a class="user_avatar"  style="background-image: url(images_W/login.jpg);"></a>
                        <div class="user_content">
                            <a class="content_name" target="_blank" >糯米fritz</a>
                            <div class="content_line">|</div>
                            <div class="content_level">undefined</div>
                            <div class="content_comment" alt="0">相看两不厌</div>
                            <div class="content_box">
                                <span class="content_time">2019-08-30 21:38</span>
                                <div class="content_app">
                                    来自
                                    <a  target="_blank"></a>
                                </div>
                                <div class="content_reply">
                                    <span class="js-reply">回复</span>
                                </div>
                            </div>
                            <div class="comment_container"></div>
                        </div>
                    </div>
                    <div class="user_comment">
                        <a class="user_avatar"  target="_blank" style="background-image: url(images_W/60.jpg);"></a>
                        <div class="user_content">
                            <a class="content_name" target="_blank" >栓栓ne</a>
                            <div class="content_line">|</div>
                            <div class="content_level">undefined</div>
                            <div class="content_comment" alt="0">拍出了大片的既视感</div>
                            <div class="content_box">
                                <span class="content_time">2019-08-29 23:05</span>
                                <div class="content_app">
                                    来自
                                    <a  target="_blank"></a>
                                </div>
                                <div class="content_reply">
                                    <span class="js-reply">回复</span>
                                </div>
                            </div>
                            <div class="comment_container"></div>
                        </div>
                    </div>
                    <div class="user_comment">
                        <a class="user_avatar"  target="_blank" style="background-image: url(images_W/wechat01.jpg);"></a>
                        <div class="user_content">
                            <a class="content_name" target="_blank" >灰鸽1</a>
                            <div class="content_line">|</div>
                            <div class="content_level">undefined</div>
                            <div class="content_comment" alt="0">仙气袅袅</div>
                            <div class="content_box">
                                <span class="content_time">2019-08-28 22:04</span>
                                <div class="content_app">
                                    来自
                                    <a  target="_blank"></a>
                                </div>
                                <div class="content_reply">
                                    <span class="js-reply">回复</span>
                                </div>
                            </div>
                            <div class="comment_container"></div>
                        </div>
                    </div>
                    <div class="user_comment">
                        <a class="user_avatar"  target="_blank" style="background-image: url(images_W/wechat02.jpeg);"></a>
                        <div class="user_content">
                            <a class="content_name" target="_blank" >雯雯丶</a>
                            <div class="content_line">|</div>
                            <div class="content_level">undefined</div>
                            <div class="content_comment" alt="0">配乐古朴幽静</div>
                            <div class="content_box">
                                <span class="content_time">2019-08-19 22:15</span>
                                <div class="content_app">
                                    来自
                                    <a  target="_blank"></a>
                                </div>
                                <div class="content_reply">
                                    <span class="js-reply">回复</span>
                                </div>
                            </div>
                            <div class="comment_container"></div>
                        </div>
                    </div>
                </div>
                <div class="user_moreComment"><span id="moreComment">查看更多</span></div>
            </div>
        </div>
        <div class="container_right">
            <!--相关视频-->
            <div class="right_videos">
                <div class="videos_title">
                    相关视频
                    <a href="videoSort.html" target="_blank">更多&gt;</a>
                </div>
                <a target="_blank" href="videoSort.html" class="recommend">
                    <img src="images_W/yuanchuang07.jpg" class="recommend_pic">
                    <div class="recommend_datetime">
                        <div class="datetime_date">2019-06-21</div>
                        <div class="datetime_time">02′10″</div>
                    </div>
                    <div class="recommend_content">
                        <div class="content_title"><span>原创</span>神秘朝鲜-三日探寻灰色国度</div>
                        <div class="content_count">播放&nbsp;&nbsp;10.82万&nbsp;&nbsp;|&nbsp;&nbsp;评论&nbsp;&nbsp;44</div>
                    </div>
                </a>
                <a target="_blank" href="videoSort.html" class="recommend">
                    <img src="images_W/yuanchuang08.jpg" class="recommend_pic">
                    <div class="recommend_datetime">
                        <div class="datetime_date">2019-06-17</div>
                        <div class="datetime_time">01′04″</div>
                    </div>
                    <div class="recommend_content">
                        <div class="content_title"><span>原创</span>仙本那-现实版“天空之城”</div>
                        <div class="content_count">播放&nbsp;&nbsp;9.19万&nbsp;&nbsp;|&nbsp;&nbsp;评论&nbsp;&nbsp;46</div>
                    </div>
                </a>
                <a target="_blank" href="videoSort.html" class="recommend">
                    <img src="images_W/hangpai_guizho.jpg" class="recommend_pic">
                    <div class="recommend_datetime">
                        <div class="datetime_date">2019-04-04</div>
                        <div class="datetime_time">00′50″</div>
                    </div>
                    <div class="recommend_content">
                        <div class="content_title"><span>原创</span>贵州花事预告！</div>
                        <div class="content_count">播放&nbsp;&nbsp;11.34万&nbsp;&nbsp;|&nbsp;&nbsp;评论&nbsp;&nbsp;42</div>                    </div>
                </a>
                <a target="_blank" href="videoSort.html" class="recommend">
                    <img src="images_W/hangpai_youcaihua.jpg" class="recommend_pic">
                    <div class="recommend_datetime">
                        <div class="datetime_date">2018-12-04</div>
                        <div class="datetime_time">00′23″</div>
                    </div>
                    <div class="recommend_content">
                        <div class="content_title"><span>原创</span>游侠客带你玩浦江 - 樱花油菜花还有3D画！</div>
                        <div class="content_count">播放&nbsp;&nbsp;11.15万&nbsp;&nbsp;|&nbsp;&nbsp;评论&nbsp;&nbsp;49</div>
                    </div>
                </a>
            </div>
        </div>
    </div>
    <div id="confirm_container">
        <div class="confirm_box">
            <div id="confirm_close"></div>
            <div class="confirm_icon"></div>
            <div id="confirm_text">确定删除该评论吗？</div>
            <div id="confirm_ok">确定</div>
            <div id="confirm_cancel">取消</div>
        </div>
    </div>
</div>
<!--底部-->
<div class="b_floor">
    <div class="l_wrapper">
        <div class="m_unit_b2">
            <div class="footerInfo">
                <ul class="weima">
                    <li>
                        <img src="images_W/wechat01.jpg" width="77" height="77">
                        <p>神游网公众号</p>
                    </li>
                    <li>
                        <img src="images_W/wechat02.jpeg" width="78" height="79">
                        <p>APP下单更优惠</p>
                    </li>
                </ul>
                <p>
                    <a data-trace="页面底部|页面底部_点击|页面底部_关于游侠客" rel="nofollow" href="javascript:void (0)" target="_blank">关于游侠客</a>
                    <a data-trace="页面底部|页面底部_点击|页面底部_游侠客的故事" rel="nofollow" href="javascript:void (0)" target="_blank">游侠客的故事</a>
                    <a data-trace="页面底部|页面底部_点击|页面底部_联系游侠客" rel="nofollow" href="javascript:void (0)" target="_blank">联系游侠客</a>
                    <a data-trace="页面底部|页面底部_点击|页面底部_游侠客招聘" rel="nofollow" href="javascript:void (0)" target="_blank">游侠客招聘</a>
                    <a data-trace="页面底部|页面底部_点击|页面底部_意见反馈" rel="nofollow" href="javascript:void (0)" target="_blank">意见反馈</a>
                    <a data-trace="页面底部|页面底部_点击|页面底部_使用协议" rel="nofollow" href="javascript:void (0)" target="_blank">使用协议</a>
                    <a data-trace="页面底部|页面底部_点击|页面底部_隐私政策" rel="nofollow" href="javascript:void (0)" target="_blank">隐私政策</a>
                    <a data-trace="页面底部|页面底部_点击|页面底部_交换链接" rel="nofollow" href="javascript:void (0)" target="_blank">交换链接</a>
                    <a data-trace="页面底部|页面底部_点击|页面底部_帮助中心" rel="nofollow" href="javascript:void (0)" target="_blank">帮助中心</a>
                    <a data-trace="页面底部|页面底部_点击|页面底部_网站地图" rel="nofollow" href="javascript:void (0)" target="_blank">网站地图</a>
                </p>
                <p>
                    <span>浙ICP备 09011712 号-1</span>
                    <span>浙公网安备 33010602002105号</span>
                    <span><a href="javascript:void (0)" rel="nofollow" target="_blank">营业执照</a></span>
                    <span>浙江游侠客国际旅行社有限公司</span>
                    <span>杭州途游电子商务有限公司</span>
                    <span>许可证编号：L-ZJ-CJ00161</span>
                </p>
                <p>©  2019 youxiake.com 版权所有法律顾问：浙江四海方圆律师事务所 傅林放 杭州市旅游投诉电话：0571-96123 投诉及紧急事件联系电话：400-670-6300转5</p>
                <p>旅游预订电话(免长途费)：400-670-6300，公司总部地址：浙江省杭州市西湖区教工路198号浙商大创业园D幢3楼，投诉建议邮箱：jianyi@youxiake.com</p>
            </div>
            <div class="friendLines">
                <div class="footerImages clearfix foot-ext">
                    <a class="footer-ext-s2" href="javascript:;" onclick="window.open('http://net.china.com.cn/index.htm')" title="不良信息举报中心"></a>
                    <a class="footer-ext-s3" href="javascript:;" onclick="window.open('http://union.rising.com.cn/InfoManage/attestation.aspx?p0=W86D47XQRcVtTOYJMVjfRn-NIHQ6TlFupjQAkt-jEyg=')" title="瑞信安全认证"></a>
                    <a class="footer-ext-s4" href="javascript:;" onclick="window.open('http://www.12312.gov.cn')" title="12321垃圾信息举报中心"></a>
                    <a href="javascript:;" onclick="window.open('http://fun.alipay.com/down/index.htm?cid=shwaibusj&amp;pid=Q_ANDROID_SHWAIBUSJ')"><img width="116" height="47" src="http://static.youxiake.com/new/Public/Images/alipay201305.png" alt="支付宝"></a>
                    <a class="footer-ext-s5" href="javascript:;" onclick="window.open('http://www.cyberpolice.cn/')" title="网络110报警服务"></a>
                    <a class="footer-ext-s6" href="javascript:;" onclick="window.open('http://122.224.75.236/wzba/login.do?method=hdurl&amp;doamin=http://www.youxiake.com&amp;id=330106000183104&amp;SHID=1223.0AFF_NAME=com.rouger. gs.main.UserInfoAff&amp;AFF_ACTION=qyhzdetail&amp;PAGE_URL=ShowDetail')" title="网上标识信息"></a>
                    <a class="footer-ext-s7" href="javascript:;" onclick="window.open('http://bbs.ifeng.com/special/bbs100/lty.shtml?bbsid=1912')" title="全球中文论坛100强"></a>
                    <a href="http://www.anquan.org/authenticate/cert/?site=www.youxiake.com&amp;sn=2013121115015380199" target="_blank" style="background:none"><img src="http://static.youxiake.com/new/Public/Images/kx_124x47.png" alt="安全联盟" height="47"></a>
                </div>
            </div>

        </div>
    </div>
</div>
<!--弹幕-->
<div id="zz">
    <div id="ds">
    </div>
</div>
<div id="sent">
    <div id="yc">
        <a href="javascript:;" class="colorHint">样式</a>
        <div class="colorDiv">
            <ul class="colorDivUl">
                <li>
                    <p class="name">字号</p>
                    <div class="fontSizeDiv">
                        <a href="javascript:;" data-size="22px">大号</a>
                        <a href="javascript:;" data-size="18px">中号</a>
                        <a href="javascript:;" data-size="14px">小号</a>
                    </div>
                    <div class="clear"></div>
                </li>
                <li>
                    <p class="name">颜色</p>
                    <div class="backColorDiv">
                        <p class="backColor"></p>
                        <p class="colorText">#ffffff</p>
                        <div class="clear"></div>
                        <div class="colorDivs">
                            <a href="javascript:;" class="a000000" data-color="000000"></a>
                            <a href="javascript:;" class="a000000" data-color="000000"></a>
                            <a href="javascript:;" class="a003300" data-color="003300"></a>
                            <a href="javascript:;" class="a006600" data-color="006600"></a>
                            <a href="javascript:;" class="a009900" data-color="009900"></a>
                            <a href="javascript:;" class="a00cc00" data-color="00cc00"></a>
                            <a href="javascript:;" class="a00ff00" data-color="00ff00"></a>
                            <a href="javascript:;" class="a3a0000" data-color="3a0000"></a>
                            <a href="javascript:;" class="a333300" data-color="333300"></a>
                            <a href="javascript:;" class="a336600" data-color="336600"></a>
                            <a href="javascript:;" class="a339900" data-color="339900"></a>
                            <a href="javascript:;" class="a33cc00" data-color="33cc00"></a>
                            <a href="javascript:;" class="a33ff00" data-color="33ff00"></a>
                            <a href="javascript:;" class="a660000" data-color="660000"></a>
                            <a href="javascript:;" class="a663300" data-color="663300"></a>
                            <a href="javascript:;" class="a666600" data-color="666600"></a>
                            <a href="javascript:;" class="a669900" data-color="669900"></a>
                            <a href="javascript:;" class="a66cc00" data-color="66cc00"></a>
                            <a href="javascript:;" class="a66ff00" data-color="66ff00"></a>
                            <a href="javascript:;" class="a333333" data-color="333333"></a>
                            <a href="javascript:;" class="a000033" data-color="000033"></a>
                            <a href="javascript:;" class="a003333" data-color="003333"></a>
                            <a href="javascript:;" class="a006633" data-color="006633"></a>
                            <a href="javascript:;" class="a009933" data-color="009933"></a>
                            <a href="javascript:;" class="a00cc33" data-color="00cc33"></a>
                            <a href="javascript:;" class="a00ff33" data-color="00ff33"></a>
                            <a href="javascript:;" class="a330033" data-color="330033"></a>
                            <a href="javascript:;" class="a333333" data-color="333333"></a>
                            <a href="javascript:;" class="a336633" data-color="336633"></a>
                            <a href="javascript:;" class="a339933" data-color="339933"></a>
                            <a href="javascript:;" class="a33cc33" data-color="33cc33"></a>
                            <a href="javascript:;" class="a33ff33" data-color="33ff33"></a>
                            <a href="javascript:;" class="a660033" data-color="660033"></a>
                            <a href="javascript:;" class="a663333" data-color="663333"></a>
                            <a href="javascript:;" class="a666633" data-color="666633"></a>
                            <a href="javascript:;" class="a669933" data-color="669933"></a>
                            <a href="javascript:;" class="a66cc33" data-color="66cc33"></a>
                            <a href="javascript:;" class="a66ff33" data-color="66ff33"></a>
                            <a href="javascript:;" class="a666666" data-color="666666"></a>
                            <a href="javascript:;" class="a000066" data-color="000066"></a>
                            <a href="javascript:;" class="a003366" data-color="003366"></a>
                            <a href="javascript:;" class="a006666" data-color="006666"></a>
                            <a href="javascript:;" class="a009966" data-color="009966"></a>
                            <a href="javascript:;" class="a00cc66" data-color="00cc66"></a>
                            <a href="javascript:;" class="a00ff66" data-color="00ff66"></a>
                            <a href="javascript:;" class="a330066" data-color="330066"></a>
                            <a href="javascript:;" class="a333366" data-color="333366"></a>
                            <a href="javascript:;" class="a336666" data-color="336666"></a>
                            <a href="javascript:;" class="a339966" data-color="339966"></a>
                            <a href="javascript:;" class="a33cc66" data-color="33cc66"></a>
                            <a href="javascript:;" class="a33ff66" data-color="33ff66"></a>
                            <a href="javascript:;" class="a660066" data-color="660066"></a>
                            <a href="javascript:;" class="a663366" data-color="663366"></a>
                            <a href="javascript:;" class="a666666" data-color="666666"></a>
                            <a href="javascript:;" class="a669966" data-color="669966"></a>
                            <a href="javascript:;" class="a66cc66" data-color="66cc66"></a>
                            <a href="javascript:;" class="a66ff66" data-color="66ff66"></a>
                            <a href="javascript:;" class="a999999" data-color="999999"></a>
                            <a href="javascript:;" class="a000099" data-color="000099"></a>
                            <a href="javascript:;" class="a003399" data-color="003399"></a>
                            <a href="javascript:;" class="a006699" data-color="006699"></a>
                            <a href="javascript:;" class="a009999" data-color="009999"></a>
                            <a href="javascript:;" class="a00cc99" data-color="00cc99"></a>
                            <a href="javascript:;" class="a00ff99" data-color="00ff99"></a>
                            <a href="javascript:;" class="a330099" data-color="330099"></a>
                            <a href="javascript:;" class="a333399" data-color="333399"></a>
                            <a href="javascript:;" class="a336699" data-color="336699"></a>
                            <a href="javascript:;" class="a339999" data-color="339999"></a>
                            <a href="javascript:;" class="a33cc99" data-color="33cc99"></a>
                            <a href="javascript:;" class="a33ff99" data-color="33ff99"></a>
                            <a href="javascript:;" class="a660099" data-color="660099"></a>
                            <a href="javascript:;" class="a663399" data-color="663399"></a>
                            <a href="javascript:;" class="a666699" data-color="666699"></a>
                            <a href="javascript:;" class="a669999" data-color="669999"></a>
                            <a href="javascript:;" class="a66cc99" data-color="66cc99"></a>
                            <a href="javascript:;" class="a66ff99" data-color="66ff99"></a>
                            <a href="javascript:;" class="acccccc" data-color="cccccc"></a>
                            <a href="javascript:;" class="a0000cc" data-color="0000cc"></a>
                            <a href="javascript:;" class="a0033cc" data-color="0033cc"></a>
                            <a href="javascript:;" class="a0066cc" data-color="0066cc"></a>
                            <a href="javascript:;" class="a0099cc" data-color="0099cc"></a>
                            <a href="javascript:;" class="a00cccc" data-color="00cccc"></a>
                            <a href="javascript:;" class="a00ffcc" data-color="00ffcc"></a>
                            <a href="javascript:;" class="a3300cc" data-color="3300cc"></a>
                            <a href="javascript:;" class="a3333cc" data-color="3333cc"></a>
                            <a href="javascript:;" class="a3366cc" data-color="3366cc"></a>
                            <a href="javascript:;" class="a3399cc" data-color="3399cc"></a>
                            <a href="javascript:;" class="a33cccc" data-color="33cccc"></a>
                            <a href="javascript:;" class="a33ffcc" data-color="33ffcc"></a>
                            <a href="javascript:;" class="a6600cc" data-color="6600cc"></a>
                            <a href="javascript:;" class="a6633cc" data-color="6633cc"></a>
                            <a href="javascript:;" class="a6666cc" data-color="6666cc"></a>
                            <a href="javascript:;" class="a6699cc" data-color="6699cc"></a>
                            <a href="javascript:;" class="a66cccc" data-color="66cccc"></a>
                            <a href="javascript:;" class="a66ffcc" data-color="66ffcc"></a>
                            <a href="javascript:;" class="affffff" data-color="ffffff"></a>
                            <a href="javascript:;" class="a0000ff" data-color="0000ff"></a>
                            <a href="javascript:;" class="a0033ff" data-color="0033ff"></a>
                            <a href="javascript:;" class="a0066ff" data-color="0066ff"></a>
                            <a href="javascript:;" class="a0099ff" data-color="0099ff"></a>
                            <a href="javascript:;" class="a00ccff" data-color="00ccff"></a>
                            <a href="javascript:;" class="a00ffff" data-color="00ffff"></a>
                            <a href="javascript:;" class="a3300ff" data-color="3300ff"></a>
                            <a href="javascript:;" class="a3333ff" data-color="3333ff"></a>
                            <a href="javascript:;" class="a3366ff" data-color="3366ff"></a>
                            <a href="javascript:;" class="a3399ff" data-color="3399ff"></a>
                            <a href="javascript:;" class="a33ccff" data-color="33ccff"></a>
                            <a href="javascript:;" class="a33ffff" data-color="33ffff"></a>
                            <a href="javascript:;" class="a6600ff" data-color="6600ff"></a>
                            <a href="javascript:;" class="a6633ff" data-color="6633ff"></a>
                            <a href="javascript:;" class="a6666ff" data-color="6666ff"></a>
                            <a href="javascript:;" class="a6699ff" data-color="6699ff"></a>
                            <a href="javascript:;" class="a66ccff" data-color="66ccff"></a>
                            <a href="javascript:;" class="a66ffff" data-color="66ffff"></a>
                            <a href="javascript:;" class="aff0000" data-color="ff0000"></a>
                            <a href="javascript:;" class="a990000" data-color="990000"></a>
                            <a href="javascript:;" class="a993300" data-color="993300"></a>
                            <a href="javascript:;" class="a996600" data-color="996600"></a>
                            <a href="javascript:;" class="a999900" data-color="999900"></a>
                            <a href="javascript:;" class="a99cc00" data-color="99cc00"></a>
                            <a href="javascript:;" class="a99ff00" data-color="99ff00"></a>
                            <a href="javascript:;" class="acc0000" data-color="cc0000"></a>
                            <a href="javascript:;" class="acc3300" data-color="cc3300"></a>
                            <a href="javascript:;" class="acc6600" data-color="cc6600"></a>
                            <a href="javascript:;" class="acc9900" data-color="cc9900"></a>
                            <a href="javascript:;" class="acccc00" data-color="cccc00"></a>
                            <a href="javascript:;" class="accff00" data-color="ccff00"></a>
                            <a href="javascript:;" class="aff0000" data-color="ff0000"></a>
                            <a href="javascript:;" class="aff3300" data-color="ff3300"></a>
                            <a href="javascript:;" class="aff6600" data-color="ff6600"></a>
                            <a href="javascript:;" class="aff9900" data-color="ff9900"></a>
                            <a href="javascript:;" class="affcc00" data-color="ffcc00"></a>
                            <a href="javascript:;" class="affff00" data-color="ffff00"></a>
                            <a href="javascript:;" class="a00ff00" data-color="00ff00"></a>
                            <a href="javascript:;" class="a990033" data-color="990033"></a>
                            <a href="javascript:;" class="a993333" data-color="993333"></a>
                            <a href="javascript:;" class="a996633" data-color="996633"></a>
                            <a href="javascript:;" class="a999933" data-color="999933"></a>
                            <a href="javascript:;" class="a99cc33" data-color="99cc33"></a>
                            <a href="javascript:;" class="a99ff33" data-color="99ff33"></a>
                            <a href="javascript:;" class="acc0033" data-color="cc0033"></a>
                            <a href="javascript:;" class="acc3333" data-color="cc3333"></a>
                            <a href="javascript:;" class="acc6633" data-color="cc6633"></a>
                            <a href="javascript:;" class="acc9933" data-color="cc9933"></a>
                            <a href="javascript:;" class="acccc33" data-color="cccc33"></a>
                            <a href="javascript:;" class="accff33" data-color="ccff33"></a>
                            <a href="javascript:;" class="aff0033" data-color="ff0033"></a>
                            <a href="javascript:;" class="aff3333" data-color="ff3333"></a>
                            <a href="javascript:;" class="aff6633" data-color="ff6633"></a>
                            <a href="javascript:;" class="aff9933" data-color="ff9933"></a>
                            <a href="javascript:;" class="affcc33" data-color="ffcc33"></a>
                            <a href="javascript:;" class="affff33" data-color="ffff33"></a>
                            <a href="javascript:;" class="a0000ff" data-color="0000ff"></a>
                            <a href="javascript:;" class="a990066" data-color="990066"></a>
                            <a href="javascript:;" class="a993366" data-color="993366"></a>
                            <a href="javascript:;" class="a996666" data-color="996666"></a>
                            <a href="javascript:;" class="a999966" data-color="999966"></a>
                            <a href="javascript:;" class="a99cc66" data-color="99cc66"></a>
                            <a href="javascript:;" class="a99ff66" data-color="99ff66"></a>
                            <a href="javascript:;" class="acc0066" data-color="cc0066"></a>
                            <a href="javascript:;" class="acc3366" data-color="cc3366"></a>
                            <a href="javascript:;" class="acc6666" data-color="cc6666"></a>
                            <a href="javascript:;" class="acc9966" data-color="cc9966"></a>
                            <a href="javascript:;" class="acccc66" data-color="cccc66"></a>
                            <a href="javascript:;" class="accff66" data-color="ccff66"></a>
                            <a href="javascript:;" class="aff0066" data-color="ff0066"></a>
                            <a href="javascript:;" class="aff3366" data-color="ff3366"></a>
                            <a href="javascript:;" class="aff6666" data-color="ff6666"></a>
                            <a href="javascript:;" class="aff9966" data-color="ff9966"></a>
                            <a href="javascript:;" class="affcc66" data-color="ffcc66"></a>
                            <a href="javascript:;" class="affff66" data-color="ffff66"></a>
                            <a href="javascript:;" class="affff00" data-color="ffff00"></a>
                            <a href="javascript:;" class="a990099" data-color="990099"></a>
                            <a href="javascript:;" class="a993399" data-color="993399"></a>
                            <a href="javascript:;" class="a996699" data-color="996699"></a>
                            <a href="javascript:;" class="a999999" data-color="999999"></a>
                            <a href="javascript:;" class="a99cc99" data-color="99cc99"></a>
                            <a href="javascript:;" class="a99ff99" data-color="99ff99"></a>
                            <a href="javascript:;" class="acc0099" data-color="cc0099"></a>
                            <a href="javascript:;" class="acc3399" data-color="cc3399"></a>
                            <a href="javascript:;" class="acc6699" data-color="cc6699"></a>
                            <a href="javascript:;" class="acc9999" data-color="cc9999"></a>
                            <a href="javascript:;" class="acccc99" data-color="cccc99"></a>
                            <a href="javascript:;" class="accff99" data-color="ccff99"></a>
                            <a href="javascript:;" class="aff0099" data-color="ff0099"></a>
                            <a href="javascript:;" class="aff3399" data-color="ff3399"></a>
                            <a href="javascript:;" class="aff6699" data-color="ff6699"></a>
                            <a href="javascript:;" class="aff9999" data-color="ff9999"></a>
                            <a href="javascript:;" class="affcc99" data-color="ffcc99"></a>
                            <a href="javascript:;" class="affff99" data-color="ffff99"></a>
                            <a href="javascript:;" class="a00ffff" data-color="00ffff"></a>
                            <a href="javascript:;" class="a9900cc" data-color="9900cc"></a>
                            <a href="javascript:;" class="a9933cc" data-color="9933cc"></a>
                            <a href="javascript:;" class="a9966cc" data-color="9966cc"></a>
                            <a href="javascript:;" class="a9999cc" data-color="9999cc"></a>
                            <a href="javascript:;" class="a99cccc" data-color="99cccc"></a>
                            <a href="javascript:;" class="a99ffcc" data-color="99ffcc"></a>
                            <a href="javascript:;" class="acc00cc" data-color="cc00cc"></a>
                            <a href="javascript:;" class="acc33cc" data-color="cc33cc"></a>
                            <a href="javascript:;" class="acc66cc" data-color="cc66cc"></a>
                            <a href="javascript:;" class="acc99cc" data-color="cc99cc"></a>
                            <a href="javascript:;" class="acccccc" data-color="cccccc"></a>
                            <a href="javascript:;" class="accffcc" data-color="ccffcc"></a>
                            <a href="javascript:;" class="aff00cc" data-color="ff00cc"></a>
                            <a href="javascript:;" class="aff33cc" data-color="ff33cc"></a>
                            <a href="javascript:;" class="aff66cc" data-color="ff66cc"></a>
                            <a href="javascript:;" class="aff99cc" data-color="ff99cc"></a>
                            <a href="javascript:;" class="affcccc" data-color="ffcccc"></a>
                            <a href="javascript:;" class="affffcc" data-color="ffffcc"></a>
                            <a href="javascript:;" class="aff00ff" data-color="ff00ff"></a>
                            <a href="javascript:;" class="a9900ff" data-color="9900ff"></a>
                            <a href="javascript:;" class="a9933ff" data-color="9933ff"></a>
                            <a href="javascript:;" class="a9966ff" data-color="9966ff"></a>
                            <a href="javascript:;" class="a9999ff" data-color="9999ff"></a>
                            <a href="javascript:;" class="a99ccff" data-color="99ccff"></a>
                            <a href="javascript:;" class="a99ffff" data-color="99ffff"></a>
                            <a href="javascript:;" class="acc00ff" data-color="cc00ff"></a>
                            <a href="javascript:;" class="acc33ff" data-color="cc33ff"></a>
                            <a href="javascript:;" class="acc66ff" data-color="cc66ff"></a>
                            <a href="javascript:;" class="acc99ff" data-color="cc99ff"></a>
                            <a href="javascript:;" class="accccff" data-color="ccccff"></a>
                            <a href="javascript:;" class="accffff" data-color="ccffff"></a>
                            <a href="javascript:;" class="aff00ff" data-color="ff00ff"></a>
                            <a href="javascript:;" class="aff33ff" data-color="ff33ff"></a>
                            <a href="javascript:;" class="aff66ff" data-color="ff66ff"></a>
                            <a href="javascript:;" class="aff99ff" data-color="ff99ff"></a>
                            <a href="javascript:;" class="affccff" data-color="ffccff"></a>
                            <a href="javascript:;" class="affffff" data-color="ffffff"></a>
                        </div>
                    </div>
                    <div class="clear"></div>
                </li>
            </ul>
        </div>
        <input id="rr" type="button" value="弹幕开关" @click="rr">
        <input id="dm" type="text" @click="dm">
        <input id="st" type="submit" value="发送 >"@click="danmu">
        <div id="dw">点击输入弹幕(仅限25字以内)</div>
    </div>
</div>
</body>
<script>


    //点赞
    function clickCounter() {
        if(typeof(Storage) !== "undefined") {
            var a= $("#result").text();
            sessionStorage.clickcount = a;
            if (sessionStorage.clickcount) {
                sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
            } else {
                sessionStorage.clickcount = 1;
            }
            document.getElementById("result").innerHTML = sessionStorage.clickcount;
        } else {
            document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
        }
    }
 // 弹幕
    var thisColor,fontSize;
    $(function(){
        $('.fontSizeDiv a').on('click',function(){
            fontSize = $(this).attr('data-size');
            $('.fontSizeDiv a').removeClass('active');
            $(this).addClass('active');
        });
        $('a.colorHint').on('click',function(){
            $('.colorDiv').toggle();
        });
        $('.colorDivs a').on('click',function(){
            thisColor = $(this).attr('data-color');
            $('p.backColor').css({
                'background-color':'#'+thisColor
            });
            $('p.colorText').text('#'+thisColor);
        });
    });

    var ds = document.getElementById('ds');
    var dm = document.getElementById('dm');
    var rr = document.getElementById('rr');
    var st = document.getElementById('st');
    var dw = document.getElementById('dw');
    var num = 0;
    var pmh = ds.offsetHeight;
    var pmw = ds.offsetWidth;

    function mu() {
        var dd = document.createElement('div');
        dd.setAttribute('class','ss');
        dd.innerHTML = dm.value;
        dm.value='';
        ds.appendChild(dd);
        dd.style.fontSize = fontSize;
        dd.style.color = '#'+thisColor;
        dd.style.left = '900px';
        dd.style.top = Math.floor(Math.random()*(pmh-30))+'px';
        var l = pmw-dd.offsetWidth;
        var tim = null;
        tim = setInterval(function(){
            l--;
            if( l <= (0-dd.offsetWidth) ){
                clearInterval(tim);
                ds.removeChild(dd);
            }
            dd.style.left = l+'px';
        },20)
    }
    rr.onclick=function() {
        num++;
        if(num%2==0) {
            rr.style.background = '#006600';
            ds.style.display='block';
            num=0;
        } else {
            rr.style.background = '#dddddd';
            ds.style.display='none';
        }
    };
    st.onclick=function() {
        if(dm.value!=''&&dm.value.length<=25) {
            mu();
        } else {
            // alert('输入不能超过25个字符!');
        }
    };
    document.onkeydown=function(even) {
        var event=even||window.event;
        if(event.keyCode==13) {
            if(dm.value!=''&&dm.value.length<=25) {
                mu();
            }
        }
    };
    dm.onclick=function() {
        dw.style.display='none';
        setInterval(obj,10);
    };
    function obj() {
        if(dm.value!=''&&dm.value.length<=25) {
            st.style.background='#ffa178';
        } else {
            st.style.background='#00A2D6';
        }
    }

</script>
</html>